<!DOCTYPE html>
<html lang="zh-Hans" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>SCSS 进阶之道：探索更多样式表达的可能性 | 高效的前端知识库</title>
    <meta name="description" content="Colorful Design 是以解决方案为驱动，包含项目的最佳实践，最佳的组件实现和便捷的工具类封装">
    <meta name="generator" content="VitePress v1.1.3">
    <link rel="preload stylesheet" href="/site/assets/style.BOjdhSVd.css" as="style">
    <script type="module" src="/site/assets/chunks/metadata.98c8d44b.js"></script>
    <script type="module" src="/site/assets/app.6emZJF9V.js"></script>
    <link rel="preload" href="/site/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/site/assets/chunks/framework.CpXV_ol5.js">
    <link rel="modulepreload" href="/site/assets/chunks/theme.BaXQ0oHj.js">
    <link rel="modulepreload" href="/site/assets/zh_blog_css_SCSS进阶-探索更多样式表达的可能性.md.B4olMzOL.lean.js">
    <link rel="icon" type="image/png" href="https://www.anyup.cn/static/anyup/images/logo-heart-transparent.png">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4522599_t4534k2ng8.css">
    <meta name="theme-color" content="#5f67ee">
    <meta name="referrer" content="no-referrer">
    <meta name="keywords" content="anyup,Colorful Design,Colorful App,JavaScript,TypeScript,Vue3,uni-app,前端工具库,博客,blog">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="zh">
    <meta property="og:title" content="Colorful Design | Vite &amp; Vue Powered Static Site Generator">
    <meta property="og:site_name" content="Colorful Design">
    <meta property="og:image" content="https://www.anyup.cn/static/anyup/images/vitepress-og.png">
    <meta property="og:url" content="https://www.anyup.cn">
    <script src="https://cdn.usefathom.com/script.js" data-site="AZBRSFGG" data-spa="auto" defer></script>
    <script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <meta name="baidu-site-verification" content="code-KOgnjImY1m">
    <script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?b3d2cace082e577b291d93de68e86eaa";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar has-sidebar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle has-sidebar" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/site/" data-v-ab179fa1><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://www.anyup.cn/static/anyup/images/logo1.png" width="65" height="24" alt data-v-8426fc1a><!--]--><span data-v-ab179fa1>高效的前端知识库</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/site/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>uni-app 相关库</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/colorful-uni/guide/introduce.html" data-v-43f1e123><!--[-->uni-app 快速开发库<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/uni-http/guide/introduce.html" data-v-43f1e123><!--[-->uni-app 请求库<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>JS 相关库</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/flyit/guide/introduce.html" data-v-43f1e123><!--[-->flyit 工具库<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/site/zh/template/create-uni/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>脚手架工具</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>博客园</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/" data-v-43f1e123><!--[-->关于我<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/uni-app/" data-v-43f1e123><!--[-->uni-app开发<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/front-end/" data-v-43f1e123><!--[-->精通前端<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/design-pattern/" data-v-43f1e123><!--[-->前端设计模式<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link active" href="/site/zh/blog/css/" data-v-43f1e123><!--[-->CSS样式表<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/vuejs2/" data-v-43f1e123><!--[-->Vue开发<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/tools/" data-v-43f1e123><!--[-->开发工具<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/site/zh/blog/large-screen/" data-v-43f1e123><!--[-->可视化大屏<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="切换到深色模式" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ccf7ddec data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/anyup" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://gitee.com/anyup" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1716370022058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3584" width="64" height="64"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#D81E06" p-id="3585"></path><path d="M771.17 455.1H480.42c-13.96 0-25.28 11.32-25.28 25.28l-0.03 63.23c0 13.95 11.3 25.28 25.28 25.28h177.02c13.96 0 25.28 11.32 25.28 25.28v12.64c0 41.89-33.95 75.84-75.84 75.84H366.62c-13.96 0-25.28-11.32-25.28-25.28V417.18c0-41.89 33.95-75.84 75.84-75.84H771.1c13.96 0 25.28-11.32 25.28-25.28l0.06-63.2c0-13.97-11.31-25.29-25.28-25.31H417.18c-104.72 0-189.61 84.88-189.63 189.6V771.1c0 13.95 11.33 25.28 25.28 25.28h372.93c94.25 0 170.66-76.41 170.66-170.66V480.35c0-13.96-11.32-25.28-25.28-25.28l0.03 0.03z" fill="#FFFFFF" p-id="3586"></path></svg></a><a class="VPSocialLink no-icon" href="https://blog.csdn.net/qq_24956515" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1725850307678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1700" width="64" height="64"><path d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m17.066667-413.525333c34.850133 4.352 68.778667 5.12 102.741333 2.0992 23.04-2.048 44.817067-8.362667 64.170667-21.9136 38.212267-26.794667 49.783467-85.1968 24.251733-123.050667-14.626133-21.7088-36.8128-30.344533-60.757333-35.498667-35.054933-7.543467-70.4512-5.751467-105.847467-3.413333-5.666133 0.3584-6.7584 3.072-7.236267 8.209067-3.072 32.682667-6.536533 65.314133-9.813333 97.962666-2.5088 24.814933-4.932267 49.629867-7.509333 75.605334z m53.4016-33.928534c1.962667-20.906667 3.6352-39.338667 5.4272-57.770666 1.553067-15.906133 3.413333-31.778133 4.727466-47.701334 0.3584-4.283733 1.553067-6.656 5.956267-6.382933 15.616 1.041067 31.709867 0.034133 46.728533 3.652267 36.488533 8.823467 48.725333 54.306133 23.3472 83.029333-15.8208 17.902933-36.7616 23.586133-59.255466 25.088-8.465067 0.546133-17.015467 0.085333-26.9312 0.085333zM512 434.295467c-2.184533-0.648533-3.5328-1.1776-4.932267-1.4336-37.717333-6.877867-75.690667-8.328533-113.646933-2.816-20.974933 3.037867-41.0112 9.489067-57.480533 23.330133-22.9888 19.319467-21.640533 46.848 4.4032 62.0032 13.056 7.594667 28.023467 12.509867 42.5984 17.288533 14.08 4.608 28.996267 6.826667 43.144533 11.264 12.5952 3.925333 14.011733 14.318933 3.584 22.306134-3.345067 2.56-7.441067 5.085867-11.537067 5.751466-11.195733 1.826133-22.698667 4.386133-33.826133 3.566934-24.098133-1.774933-48.042667-5.461333-72.5504-8.430934-1.365333 10.615467-2.935467 23.0912-4.5568 35.9424 4.181333 1.365333 7.68 2.730667 11.264 3.618134 33.9456 8.4992 68.386133 9.608533 102.912 5.12 20.087467-2.6112 39.4752-7.901867 56.695467-19.029334 28.603733-18.4832 36.693333-57.1904-4.676267-75.383466-14.506667-6.382933-30.190933-10.410667-45.482667-15.086934-11.4176-3.4816-23.313067-5.614933-34.525866-9.5232-9.7792-3.413333-11.144533-12.202667-3.037867-18.397866 4.6592-3.549867 10.717867-6.997333 16.384-7.3728a480.853333 480.853333 0 0 1 53.384533-0.853334c15.377067 0.699733 30.651733 3.549867 46.4896 5.5296L512 434.295467z m257.143467 2.048L750.933333 614.2976h54.152534c4.778667-45.636267 9.710933-90.7264 14.062933-135.8848 0.6144-6.365867 2.3552-8.840533 8.686933-9.0112 11.434667-0.273067 22.8864-1.979733 34.286934-1.570133 23.722667 0.853333 42.3936 9.728 38.4 43.264-2.901333 24.2688-5.597867 48.571733-8.2432 72.874666-1.092267 10.069333-1.826133 20.189867-2.730667 30.4128h55.330133c3.584-35.259733 7.9872-70.058667 10.496-104.994133 3.413333-47.4624-17.7664-73.3184-64.682666-80.213333-40.96-6.007467-81.339733-0.341333-121.5488 7.133866z m-483.498667 134.6048c-8.738133 1.297067-16.384 2.798933-24.098133 3.4816-25.6512 2.235733-51.319467 3.9424-76.305067-4.266667-13.909333-4.590933-24.6784-12.578133-29.7984-25.9584-7.901867-20.701867 0.887467-47.104 19.831467-60.3136 17.373867-12.117333 37.717333-15.9232 58.453333-15.9232 22.545067-0.017067 45.090133 2.423467 68.232533 3.84L307.2 432.298667c-15.069867-1.723733-29.4912-3.925333-43.997867-4.9152-41.0112-2.798933-80.64 2.6112-117.469866 20.462933-30.020267 14.557867-52.053333 36.010667-58.6752 68.130133-7.850667 38.144 11.537067 69.495467 51.7632 85.845334 19.1488 7.765333 39.287467 12.509867 60.0064 12.5952 24.746667 0.1024 49.493333-1.570133 74.205866-2.952534 3.106133-0.170667 8.311467-2.901333 8.669867-5.034666 1.979733-11.554133 2.730667-23.278933 3.9424-35.464534z" fill="#DD1700" p-id="1701"></path></svg></a><a class="VPSocialLink no-icon" href="https://www.yuque.com/anyup" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1725850403690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1702" width="64" height="64"><path d="M512 0c282.773333 0 512 229.226667 512 512S794.773333 1024 512 1024 0 794.773333 0 512 229.226667 0 512 0z m67.626667 256.768c-62.101333 3.370667-103.744 24.789333-115.626667 30.805333 19.989333 5.781333 28.8 7.701333 41.621333 17.578667 12.842667 9.877333 33.066667 38.997333 16.64 77.013333-7.765333 17.792-80.426667 99.2-157.76 183.018667l-12.906666 13.973333-12.949334 13.973334a16904.213333 16904.213333 0 0 1-167.253333 177.557333c-8.746667 8.853333 62.122667 21.397333 135.402667 26.069333l11.008 0.64c14.656 0.768 29.269333 1.194667 43.2 1.194667 77.546667 0 128.917333-27.2 167.701333-60.650667 31.402667 8.426667 110.613333 22.4 178.176-39.253333 84.693333-77.248 68.053333-166.549333 64.704-184.597333-6.186667-33.472-21.653333-59.946667-28.309333-71.978667 0 0 8.32-12.757333 13.077333-25.514667 6.186667-16.128 7.381333-36.586667 7.381333-36.586666l40.917334-41.642667-51.861334-5.76c-11.904-29.376-26.410667-43.093333-40.682666-52.48-28.778667-19.029333-70.656-26.730667-132.48-23.36z" fill="#00b578" p-id="1703"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/4230576472589976/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1726024953889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3562" width="64" height="64"><path d="M512.010445 0.000585A512.281535 512.281535 0 0 0 1.016196 479.339287c-19.250785 305.964609 237.679908 562.895302 543.644517 543.644517A511.98897 511.98897 0 0 0 512.010445 0.000585z" fill="#2180FF" p-id="3563"></path><path d="M481.700698 269.160501l21.064689-15.798517a75.189237 75.189237 0 0 1 8.89398-6.846024 118.547389 118.547389 0 0 1 13.692048 10.005728l21.591306 16.851751a20.88915 20.88915 0 0 0 5.851303 4.212938A52.661723 52.661723 0 0 0 563.794472 286.714408q6.319407 5.266172 10.532345 8.425876a18.548629 18.548629 0 0 1 3.68632 4.212938q0 0.526617-2.106468 2.106469-0.526617 0.526617-8.952493 6.846024t-20.011455 15.740004q-11.702605 10.005727-20.538072 16.851751t-11.058962 8.425875l-3.68632 2.633087-24.16588-19.484838a167.69833 167.69833 0 0 1-17.553907-13.633535q-7.372641-5.851303-8.425876-6.319406l-2.457547-2.399034q-2.633086-2.106469-6.319406-4.739555l-7.372642-5.851303 4.212938-3.686321A70.80076 70.80076 0 0 1 460.636009 286.714408zM643.664752 394.144323q11.058962-7.899258 18.95822-14.218665a36.453615 36.453615 0 0 1 8.425875-5.851303q3.042677 2.633086 21.006177 16.851751c11.702605 9.47911 18.431603 14.862308 20.538071 16.266621q0 1.053234-5.851302 5.851303l-13.692048 11.058962q-8.425876 6.319407-20.011455 15.798516-12.521787 10.005727-22.586027 17.553908-10.005727 8.425876-21.064689 16.851751c-7.372641 5.851303-13.516509 10.707884-18.431603 14.160152L600.072548 497.361299q-4.739555 3.686321-5.266172 4.212938c-1.755391 1.404313-8.89398 7.021563-21.532794 16.851751s-23.40521 18.95822-35.107815 28.43733l-4.739555 3.159704q-3.686321 3.159703-7.899258 6.319407l-11.234501 8.308849a3.10119 3.10119 0 0 1-2.633086 1.579852q-0.526617 0.526617-2.106469-1.053235c-1.3458-0.702156-7.840745-5.851303-19.426324-15.271899s-26.5064-20.362533-43.70923-33.703503q-47.805142-37.91644-64.364328-51.023358l-24.224392-19.484837q-4.212938-3.159703-10.005728-7.899258c-3.803347-3.159703-7.489667-5.851303-11.000448-8.952493a46.166777 46.166777 0 0 1-8.952493-6.846024 16.032569 16.032569 0 0 1-4.739555-3.686321 31.889599 31.889599 0 0 0-2.633086-2.106469 16.500673 16.500673 0 0 0-4.212938-3.159703q-7.899258-6.319407-4.739555-6.319407a1.521339 1.521339 0 0 0 1.053234-0.526617l3.159704-2.047956a5.090633 5.090633 0 0 1 2.633086-2.106469l2.106469-2.106469a64.890945 64.890945 0 0 0 6.319406-4.739555L336.997987 386.186551c4.212938-3.510782 7.899258-6.319407 11.000448-8.425875a53.831983 53.831983 0 0 1 5.266173-3.686321 11.702605 11.702605 0 0 1 3.159703 1.579852l4.739555 4.739555q18.431603 13.692048 40.549527 31.011903t30.485286 24.224393a15.447439 15.447439 0 0 0 4.212938 3.68632l5.266172 4.212938a57.459791 57.459791 0 0 0 4.739555 4.212938q3.159703 2.106469 4.212938 2.633086a60.443955 60.443955 0 0 0 5.851302 4.739555A86.131173 86.131173 0 0 0 465.375564 462.253484q26.857479 21.064689 35.107815 27.8522a81.508644 81.508644 0 0 0 8.89398 6.846024c-1.3458 3.159703 4.915094-0.526617 18.95822-11.000449S580.295145 444.699576 643.664752 394.144323zM200.136021 496.717656l14.218665-11.702605a33.46945 33.46945 0 0 1 5.851302-4.212938q0-1.053234 7.372642 4.739555t32.12365 25.745731q6.787511 4.739555 23.405211 17.904986t35.107815 27.910713l65.76864 51.549975q18.431603 15.2719 20.538072 16.851751a58.513025 58.513025 0 0 1 8.952493 7.372641c5.266172 3.86186 11.058962 8.250337 17.553907 13.165431l16.851751 13.106918 7.372642 6.319406q1.053234 0.526617 4.212937 2.633087l6.846024 5.851302a36.921719 36.921719 0 0 0 7.372642 5.266172q2.633086 3.159703 3.159703 3.159704l1.579852 1.053234a17.553908 17.553908 0 0 0 2.633086 2.106469l3.68632 2.633086a8.250337 8.250337 0 0 0 2.106469 1.579852 8.601415 8.601415 0 0 0 3.159704 2.633086l8.425875 6.319407a57.459791 57.459791 0 0 1 4.739555 4.212938q1.579852 1.579852 2.106469 1.579851t1.579852 1.053235a3.452268 3.452268 0 0 0 2.047956 1.579851l2.633086 2.106469 7.372641-5.266172a64.364328 64.364328 0 0 1 9.47911-7.372641 136.74494 136.74494 0 0 1 11.058962-8.952493q5.266172-4.212938 15.798517-12.112196t20.011454-16.325134c7.021563-5.266172 14.394204-11.000449 22.059411-17.553908s14.569743-11.058962 19.484837-15.271899 9.303571-7.197102 13.165431-10.005728a20.479559 20.479559 0 0 0 6.319407-5.851302q1.053234-0.526617 9.47911-7.372641t20.011454-16.325134l20.479559-15.2719c5.851303-4.505503 9.128032-6.96305 9.47911-7.314128l2.633086-2.633086a22.23495 22.23495 0 0 0 5.851303-4.212938q7.372641-5.851303 9.47911-7.899258a14.043126 14.043126 0 0 1 4.739555-3.159704 44.820977 44.820977 0 0 1 5.266172-4.212938l6.846024-5.851302a73.726412 73.726412 0 0 0 6.846024-4.739555q2.633086-2.106469 2.633086-2.633086a10.06424 10.06424 0 0 0 4.212938-2.633086l8.425876-7.372642a57.459791 57.459791 0 0 0 8.367362-6.846024q4.212938-2.633086 5.266172-3.159703a37.389823 37.389823 0 0 1 6.319407-5.851302 117.435642 117.435642 0 0 1 12.638814-9.479111c7.372641-5.851303 12.463274-9.947214 15.271899-12.053683s4.739555-1.579852 4.739555-0.526617 0.702156 1.053234 2.106469 2.106469a14.979334 14.979334 0 0 1 3.159703 2.633086 110.82367 110.82367 0 0 1 12.112197 9.947214 97.716752 97.716752 0 0 1 9.011006 7.548181q0 0.526617 2.106468 1.579851a60.853546 60.853546 0 0 1 5.20766 4.739555l7.372641 5.266173-3.159703 1.579851q-0.526617 1.579852-4.212938 3.159704a28.378817 28.378817 0 0 1-5.851303 5.266172 46.81042 46.81042 0 0 0-5.851302 4.739555l-2.633086 2.106469a25.745731 25.745731 0 0 0-2.633087 1.579852 52.193618 52.193618 0 0 1-4.212937 3.68632q-7.899258 6.319407-18.431603 14.218665t-12.112197 10.005728q-1.579852 1.053234-7.899258 5.851302c-4.564016 3.452268-9.830188 7.665206-15.798517 12.580301q-22.586028 18.431603-35.107815 27.384095-12.112196 10.005727-26.330861 21.064689-7.899258 6.319407-13.165431 10.005728a62.316372 62.316372 0 0 1-6.846024 5.851302 23.814801 23.814801 0 0 0-3.159703 2.106469l-3.159703 3.686321-4.212938 2.574573-2.047956 2.106469q-4.212938 2.633086-18.95822 14.218665-13.692048 11.058962-26.330862 20.538072a112.7546 112.7546 0 0 1-11.058961 8.952492l-5.266173 4.739556a5.441711 5.441711 0 0 0-2.106469 1.053234 17.553908 17.553908 0 0 0-2.633086 2.106469q-2.106469 1.579852-5.266172 4.212938a27.150044 27.150044 0 0 0-5.851303 5.266172q-8.30885 5.851303-32.591755 25.219114t-38.443057 30.017182a47.39555 47.39555 0 0 1-6.846024 4.739555 10.590858 10.590858 0 0 1-3.159703 2.106469c-0.702156-0.351078-5.558737-4.037399-14.68677-11.058962l-34.756737-27.910713q-21.591306-16.266621-43.650716-33.64499t-34.23012-27.910713l-21.591306-16.325134q-10.005727-7.899258-11.058962-8.425875c-2.106469-1.755391-5.851303-4.505503-10.473832-8.367363s-13.165431-10.707884-25.804244-20.538072q-11.702605-9.47911-23.40521-18.431603t-16.325134-13.457995c-7.723719-6.319407-13.633535-11.058962-17.553907-14.218666s-11.702605-9.245058-22.117924-17.553907q-43.1241-33.059859-51.023358-39.788857c-5.207659-4.212938-6.96305-6.319407-5.207659-6.319407 0.702156-0.702156 2.984164-2.633086 6.787511-5.851302s8.601415-6.787511 14.218665-11.000449z" fill="#FFFFFF" p-id="3564"></path></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ccf7ddec data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>主题</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="切换到深色模式" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><div class="group" data-v-d0bd9dde><div class="item social-links" data-v-d0bd9dde><div class="VPSocialLinks social-links-list" data-v-d0bd9dde data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/anyup" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><span class="vpi-social-github" /></a><a class="VPSocialLink no-icon" href="https://gitee.com/anyup" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1716370022058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3584" width="64" height="64"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#D81E06" p-id="3585"></path><path d="M771.17 455.1H480.42c-13.96 0-25.28 11.32-25.28 25.28l-0.03 63.23c0 13.95 11.3 25.28 25.28 25.28h177.02c13.96 0 25.28 11.32 25.28 25.28v12.64c0 41.89-33.95 75.84-75.84 75.84H366.62c-13.96 0-25.28-11.32-25.28-25.28V417.18c0-41.89 33.95-75.84 75.84-75.84H771.1c13.96 0 25.28-11.32 25.28-25.28l0.06-63.2c0-13.97-11.31-25.29-25.28-25.31H417.18c-104.72 0-189.61 84.88-189.63 189.6V771.1c0 13.95 11.33 25.28 25.28 25.28h372.93c94.25 0 170.66-76.41 170.66-170.66V480.35c0-13.96-11.32-25.28-25.28-25.28l0.03 0.03z" fill="#FFFFFF" p-id="3586"></path></svg></a><a class="VPSocialLink no-icon" href="https://blog.csdn.net/qq_24956515" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1725850307678" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1700" width="64" height="64"><path d="M512 1024C229.2224 1024 0 794.7776 0 512 0 229.2224 229.2224 0 512 0c282.7776 0 512 229.2224 512 512 0 282.7776-229.2224 512-512 512z m17.066667-413.525333c34.850133 4.352 68.778667 5.12 102.741333 2.0992 23.04-2.048 44.817067-8.362667 64.170667-21.9136 38.212267-26.794667 49.783467-85.1968 24.251733-123.050667-14.626133-21.7088-36.8128-30.344533-60.757333-35.498667-35.054933-7.543467-70.4512-5.751467-105.847467-3.413333-5.666133 0.3584-6.7584 3.072-7.236267 8.209067-3.072 32.682667-6.536533 65.314133-9.813333 97.962666-2.5088 24.814933-4.932267 49.629867-7.509333 75.605334z m53.4016-33.928534c1.962667-20.906667 3.6352-39.338667 5.4272-57.770666 1.553067-15.906133 3.413333-31.778133 4.727466-47.701334 0.3584-4.283733 1.553067-6.656 5.956267-6.382933 15.616 1.041067 31.709867 0.034133 46.728533 3.652267 36.488533 8.823467 48.725333 54.306133 23.3472 83.029333-15.8208 17.902933-36.7616 23.586133-59.255466 25.088-8.465067 0.546133-17.015467 0.085333-26.9312 0.085333zM512 434.295467c-2.184533-0.648533-3.5328-1.1776-4.932267-1.4336-37.717333-6.877867-75.690667-8.328533-113.646933-2.816-20.974933 3.037867-41.0112 9.489067-57.480533 23.330133-22.9888 19.319467-21.640533 46.848 4.4032 62.0032 13.056 7.594667 28.023467 12.509867 42.5984 17.288533 14.08 4.608 28.996267 6.826667 43.144533 11.264 12.5952 3.925333 14.011733 14.318933 3.584 22.306134-3.345067 2.56-7.441067 5.085867-11.537067 5.751466-11.195733 1.826133-22.698667 4.386133-33.826133 3.566934-24.098133-1.774933-48.042667-5.461333-72.5504-8.430934-1.365333 10.615467-2.935467 23.0912-4.5568 35.9424 4.181333 1.365333 7.68 2.730667 11.264 3.618134 33.9456 8.4992 68.386133 9.608533 102.912 5.12 20.087467-2.6112 39.4752-7.901867 56.695467-19.029334 28.603733-18.4832 36.693333-57.1904-4.676267-75.383466-14.506667-6.382933-30.190933-10.410667-45.482667-15.086934-11.4176-3.4816-23.313067-5.614933-34.525866-9.5232-9.7792-3.413333-11.144533-12.202667-3.037867-18.397866 4.6592-3.549867 10.717867-6.997333 16.384-7.3728a480.853333 480.853333 0 0 1 53.384533-0.853334c15.377067 0.699733 30.651733 3.549867 46.4896 5.5296L512 434.295467z m257.143467 2.048L750.933333 614.2976h54.152534c4.778667-45.636267 9.710933-90.7264 14.062933-135.8848 0.6144-6.365867 2.3552-8.840533 8.686933-9.0112 11.434667-0.273067 22.8864-1.979733 34.286934-1.570133 23.722667 0.853333 42.3936 9.728 38.4 43.264-2.901333 24.2688-5.597867 48.571733-8.2432 72.874666-1.092267 10.069333-1.826133 20.189867-2.730667 30.4128h55.330133c3.584-35.259733 7.9872-70.058667 10.496-104.994133 3.413333-47.4624-17.7664-73.3184-64.682666-80.213333-40.96-6.007467-81.339733-0.341333-121.5488 7.133866z m-483.498667 134.6048c-8.738133 1.297067-16.384 2.798933-24.098133 3.4816-25.6512 2.235733-51.319467 3.9424-76.305067-4.266667-13.909333-4.590933-24.6784-12.578133-29.7984-25.9584-7.901867-20.701867 0.887467-47.104 19.831467-60.3136 17.373867-12.117333 37.717333-15.9232 58.453333-15.9232 22.545067-0.017067 45.090133 2.423467 68.232533 3.84L307.2 432.298667c-15.069867-1.723733-29.4912-3.925333-43.997867-4.9152-41.0112-2.798933-80.64 2.6112-117.469866 20.462933-30.020267 14.557867-52.053333 36.010667-58.6752 68.130133-7.850667 38.144 11.537067 69.495467 51.7632 85.845334 19.1488 7.765333 39.287467 12.509867 60.0064 12.5952 24.746667 0.1024 49.493333-1.570133 74.205866-2.952534 3.106133-0.170667 8.311467-2.901333 8.669867-5.034666 1.979733-11.554133 2.730667-23.278933 3.9424-35.464534z" fill="#DD1700" p-id="1701"></path></svg></a><a class="VPSocialLink no-icon" href="https://www.yuque.com/anyup" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1725850403690" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1702" width="64" height="64"><path d="M512 0c282.773333 0 512 229.226667 512 512S794.773333 1024 512 1024 0 794.773333 0 512 229.226667 0 512 0z m67.626667 256.768c-62.101333 3.370667-103.744 24.789333-115.626667 30.805333 19.989333 5.781333 28.8 7.701333 41.621333 17.578667 12.842667 9.877333 33.066667 38.997333 16.64 77.013333-7.765333 17.792-80.426667 99.2-157.76 183.018667l-12.906666 13.973333-12.949334 13.973334a16904.213333 16904.213333 0 0 1-167.253333 177.557333c-8.746667 8.853333 62.122667 21.397333 135.402667 26.069333l11.008 0.64c14.656 0.768 29.269333 1.194667 43.2 1.194667 77.546667 0 128.917333-27.2 167.701333-60.650667 31.402667 8.426667 110.613333 22.4 178.176-39.253333 84.693333-77.248 68.053333-166.549333 64.704-184.597333-6.186667-33.472-21.653333-59.946667-28.309333-71.978667 0 0 8.32-12.757333 13.077333-25.514667 6.186667-16.128 7.381333-36.586667 7.381333-36.586666l40.917334-41.642667-51.861334-5.76c-11.904-29.376-26.410667-43.093333-40.682666-52.48-28.778667-19.029333-70.656-26.730667-132.48-23.36z" fill="#00b578" p-id="1703"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/4230576472589976/posts" aria-label target="_blank" rel="noopener" data-v-7bc22406 data-v-eee4e7cb><svg t="1726024953889" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3562" width="64" height="64"><path d="M512.010445 0.000585A512.281535 512.281535 0 0 0 1.016196 479.339287c-19.250785 305.964609 237.679908 562.895302 543.644517 543.644517A511.98897 511.98897 0 0 0 512.010445 0.000585z" fill="#2180FF" p-id="3563"></path><path d="M481.700698 269.160501l21.064689-15.798517a75.189237 75.189237 0 0 1 8.89398-6.846024 118.547389 118.547389 0 0 1 13.692048 10.005728l21.591306 16.851751a20.88915 20.88915 0 0 0 5.851303 4.212938A52.661723 52.661723 0 0 0 563.794472 286.714408q6.319407 5.266172 10.532345 8.425876a18.548629 18.548629 0 0 1 3.68632 4.212938q0 0.526617-2.106468 2.106469-0.526617 0.526617-8.952493 6.846024t-20.011455 15.740004q-11.702605 10.005727-20.538072 16.851751t-11.058962 8.425875l-3.68632 2.633087-24.16588-19.484838a167.69833 167.69833 0 0 1-17.553907-13.633535q-7.372641-5.851303-8.425876-6.319406l-2.457547-2.399034q-2.633086-2.106469-6.319406-4.739555l-7.372642-5.851303 4.212938-3.686321A70.80076 70.80076 0 0 1 460.636009 286.714408zM643.664752 394.144323q11.058962-7.899258 18.95822-14.218665a36.453615 36.453615 0 0 1 8.425875-5.851303q3.042677 2.633086 21.006177 16.851751c11.702605 9.47911 18.431603 14.862308 20.538071 16.266621q0 1.053234-5.851302 5.851303l-13.692048 11.058962q-8.425876 6.319407-20.011455 15.798516-12.521787 10.005727-22.586027 17.553908-10.005727 8.425876-21.064689 16.851751c-7.372641 5.851303-13.516509 10.707884-18.431603 14.160152L600.072548 497.361299q-4.739555 3.686321-5.266172 4.212938c-1.755391 1.404313-8.89398 7.021563-21.532794 16.851751s-23.40521 18.95822-35.107815 28.43733l-4.739555 3.159704q-3.686321 3.159703-7.899258 6.319407l-11.234501 8.308849a3.10119 3.10119 0 0 1-2.633086 1.579852q-0.526617 0.526617-2.106469-1.053235c-1.3458-0.702156-7.840745-5.851303-19.426324-15.271899s-26.5064-20.362533-43.70923-33.703503q-47.805142-37.91644-64.364328-51.023358l-24.224392-19.484837q-4.212938-3.159703-10.005728-7.899258c-3.803347-3.159703-7.489667-5.851303-11.000448-8.952493a46.166777 46.166777 0 0 1-8.952493-6.846024 16.032569 16.032569 0 0 1-4.739555-3.686321 31.889599 31.889599 0 0 0-2.633086-2.106469 16.500673 16.500673 0 0 0-4.212938-3.159703q-7.899258-6.319407-4.739555-6.319407a1.521339 1.521339 0 0 0 1.053234-0.526617l3.159704-2.047956a5.090633 5.090633 0 0 1 2.633086-2.106469l2.106469-2.106469a64.890945 64.890945 0 0 0 6.319406-4.739555L336.997987 386.186551c4.212938-3.510782 7.899258-6.319407 11.000448-8.425875a53.831983 53.831983 0 0 1 5.266173-3.686321 11.702605 11.702605 0 0 1 3.159703 1.579852l4.739555 4.739555q18.431603 13.692048 40.549527 31.011903t30.485286 24.224393a15.447439 15.447439 0 0 0 4.212938 3.68632l5.266172 4.212938a57.459791 57.459791 0 0 0 4.739555 4.212938q3.159703 2.106469 4.212938 2.633086a60.443955 60.443955 0 0 0 5.851302 4.739555A86.131173 86.131173 0 0 0 465.375564 462.253484q26.857479 21.064689 35.107815 27.8522a81.508644 81.508644 0 0 0 8.89398 6.846024c-1.3458 3.159703 4.915094-0.526617 18.95822-11.000449S580.295145 444.699576 643.664752 394.144323zM200.136021 496.717656l14.218665-11.702605a33.46945 33.46945 0 0 1 5.851302-4.212938q0-1.053234 7.372642 4.739555t32.12365 25.745731q6.787511 4.739555 23.405211 17.904986t35.107815 27.910713l65.76864 51.549975q18.431603 15.2719 20.538072 16.851751a58.513025 58.513025 0 0 1 8.952493 7.372641c5.266172 3.86186 11.058962 8.250337 17.553907 13.165431l16.851751 13.106918 7.372642 6.319406q1.053234 0.526617 4.212937 2.633087l6.846024 5.851302a36.921719 36.921719 0 0 0 7.372642 5.266172q2.633086 3.159703 3.159703 3.159704l1.579852 1.053234a17.553908 17.553908 0 0 0 2.633086 2.106469l3.68632 2.633086a8.250337 8.250337 0 0 0 2.106469 1.579852 8.601415 8.601415 0 0 0 3.159704 2.633086l8.425875 6.319407a57.459791 57.459791 0 0 1 4.739555 4.212938q1.579852 1.579852 2.106469 1.579851t1.579852 1.053235a3.452268 3.452268 0 0 0 2.047956 1.579851l2.633086 2.106469 7.372641-5.266172a64.364328 64.364328 0 0 1 9.47911-7.372641 136.74494 136.74494 0 0 1 11.058962-8.952493q5.266172-4.212938 15.798517-12.112196t20.011454-16.325134c7.021563-5.266172 14.394204-11.000449 22.059411-17.553908s14.569743-11.058962 19.484837-15.271899 9.303571-7.197102 13.165431-10.005728a20.479559 20.479559 0 0 0 6.319407-5.851302q1.053234-0.526617 9.47911-7.372641t20.011454-16.325134l20.479559-15.2719c5.851303-4.505503 9.128032-6.96305 9.47911-7.314128l2.633086-2.633086a22.23495 22.23495 0 0 0 5.851303-4.212938q7.372641-5.851303 9.47911-7.899258a14.043126 14.043126 0 0 1 4.739555-3.159704 44.820977 44.820977 0 0 1 5.266172-4.212938l6.846024-5.851302a73.726412 73.726412 0 0 0 6.846024-4.739555q2.633086-2.106469 2.633086-2.633086a10.06424 10.06424 0 0 0 4.212938-2.633086l8.425876-7.372642a57.459791 57.459791 0 0 0 8.367362-6.846024q4.212938-2.633086 5.266172-3.159703a37.389823 37.389823 0 0 1 6.319407-5.851302 117.435642 117.435642 0 0 1 12.638814-9.479111c7.372641-5.851303 12.463274-9.947214 15.271899-12.053683s4.739555-1.579852 4.739555-0.526617 0.702156 1.053234 2.106469 2.106469a14.979334 14.979334 0 0 1 3.159703 2.633086 110.82367 110.82367 0 0 1 12.112197 9.947214 97.716752 97.716752 0 0 1 9.011006 7.548181q0 0.526617 2.106468 1.579851a60.853546 60.853546 0 0 1 5.20766 4.739555l7.372641 5.266173-3.159703 1.579851q-0.526617 1.579852-4.212938 3.159704a28.378817 28.378817 0 0 1-5.851303 5.266172 46.81042 46.81042 0 0 0-5.851302 4.739555l-2.633086 2.106469a25.745731 25.745731 0 0 0-2.633087 1.579852 52.193618 52.193618 0 0 1-4.212937 3.68632q-7.899258 6.319407-18.431603 14.218665t-12.112197 10.005728q-1.579852 1.053234-7.899258 5.851302c-4.564016 3.452268-9.830188 7.665206-15.798517 12.580301q-22.586028 18.431603-35.107815 27.384095-12.112196 10.005727-26.330861 21.064689-7.899258 6.319407-13.165431 10.005728a62.316372 62.316372 0 0 1-6.846024 5.851302 23.814801 23.814801 0 0 0-3.159703 2.106469l-3.159703 3.686321-4.212938 2.574573-2.047956 2.106469q-4.212938 2.633086-18.95822 14.218665-13.692048 11.058962-26.330862 20.538072a112.7546 112.7546 0 0 1-11.058961 8.952492l-5.266173 4.739556a5.441711 5.441711 0 0 0-2.106469 1.053234 17.553908 17.553908 0 0 0-2.633086 2.106469q-2.106469 1.579852-5.266172 4.212938a27.150044 27.150044 0 0 0-5.851303 5.266172q-8.30885 5.851303-32.591755 25.219114t-38.443057 30.017182a47.39555 47.39555 0 0 1-6.846024 4.739555 10.590858 10.590858 0 0 1-3.159703 2.106469c-0.702156-0.351078-5.558737-4.037399-14.68677-11.058962l-34.756737-27.910713q-21.591306-16.266621-43.650716-33.64499t-34.23012-27.910713l-21.591306-16.325134q-10.005727-7.899258-11.058962-8.425875c-2.106469-1.755391-5.851303-4.505503-10.473832-8.367363s-13.165431-10.707884-25.804244-20.538072q-11.702605-9.47911-23.40521-18.431603t-16.325134-13.457995c-7.723719-6.319407-13.633535-11.058962-17.553907-14.218666s-11.702605-9.245058-22.117924-17.553907q-43.1241-33.059859-51.023358-39.788857c-5.207659-4.212938-6.96305-6.319407-5.207659-6.319407 0.702156-0.702156 2.984164-2.633086 6.787511-5.851302s8.601415-6.787511 14.218665-11.000449z" fill="#FFFFFF" p-id="3564"></path></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ccf7ddec data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-ccf7ddec><div class="divider-line" data-v-ccf7ddec></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>菜单</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-267dd0ed><button data-v-267dd0ed>回到顶部</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-575e6a36><div class="curtain" data-v-575e6a36></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-575e6a36><span class="visually-hidden" id="sidebar-aria-label" data-v-575e6a36> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible has-active" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>CSS样式表</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/css/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. CSS样式表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/css/SCSS%E5%85%A5%E9%97%A8-%E5%88%A9%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8%E5%8D%87%E7%BA%A7%E6%A0%B7%E5%BC%8F%E8%A1%A8%E6%8A%80%E6%9C%AF.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. SCSS入门-利用预处理器升级样式表技术</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/css/SCSS%E5%AE%9E%E8%B7%B5-%E6%9E%84%E5%BB%BA%E9%80%82%E5%90%88%E8%87%AA%E5%B7%B1%E7%9A%84%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%E5%BA%93.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. SCSS实践-构建适合自己的全局样式库</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/css/SCSS%E8%BF%9B%E9%98%B6-%E6%8E%A2%E7%B4%A2%E6%9B%B4%E5%A4%9A%E6%A0%B7%E5%BC%8F%E8%A1%A8%E8%BE%BE%E7%9A%84%E5%8F%AF%E8%83%BD%E6%80%A7.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. SCSS进阶-探索更多样式表达的可能性</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>设计模式</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. 设计模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%BF%85%E5%A4%87%E5%AF%BC%E8%88%AA%E6%8C%87%E5%8D%97.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. 必备导航指南</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%88%9B%E5%BB%BA%E5%9E%8B-%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. 创建型-单例模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%88%9B%E5%BB%BA%E5%9E%8B-%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. 创建型-原型模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%88%9B%E5%BB%BA%E5%9E%8B-%E5%B7%A5%E5%8E%82%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>5. 创建型-工厂方法模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%88%9B%E5%BB%BA%E5%9E%8B-%E5%BB%BA%E9%80%A0%E8%80%85%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>6. 创建型-建造者模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%88%9B%E5%BB%BA%E5%9E%8B-%E6%8A%BD%E8%B1%A1%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>7. 创建型-抽象工厂模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E5%88%9B%E5%BB%BA%E5%9E%8B-%E7%AE%80%E5%8D%95%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>8. 创建型-简单工厂模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E4%BA%AB%E5%85%83%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>9. 结构型-享元模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E4%BB%A3%E7%90%86%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>10. 结构型-代理模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E5%A4%96%E8%A7%82%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>11. 结构型-外观模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E6%A1%A5%E6%8E%A5%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>12. 结构型-桥接模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E7%BB%84%E5%90%88%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>13. 结构型-组合模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E8%A3%85%E9%A5%B0%E8%80%85%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>14. 结构型-装饰者模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E7%BB%93%E6%9E%84%E5%9E%8B-%E9%80%82%E9%85%8D%E5%99%A8%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>15. 结构型-适配器模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E8%A1%8C%E4%B8%BA%E5%9E%8B-%E5%91%BD%E4%BB%A4%E6%A8%A1%E5%BC%8F%E5%AE%9E%E6%88%98.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>16. 行为型-命令模式实战</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E8%A1%8C%E4%B8%BA%E5%9E%8B-%E6%A8%A1%E6%9D%BF%E6%96%B9%E6%B3%95%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>17. 行为型-模板方法模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E8%A1%8C%E4%B8%BA%E5%9E%8B-%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>18. 行为型-状态模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E8%A1%8C%E4%B8%BA%E5%9E%8B-%E7%AD%96%E7%95%A5%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>19. 行为型-策略模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E8%A1%8C%E4%B8%BA%E5%9E%8B-%E8%81%8C%E8%B4%A3%E9%93%BE%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>20. 行为型-职责链模式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/design-pattern/%E8%A1%8C%E4%B8%BA%E5%9E%8B-%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>21. 行为型-观察者模式</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>精通前端</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. 精通前端</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Blob%E5%AE%9E%E8%B7%B5-%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF%E5%92%8C%E5%AE%9E%E4%BE%8B%E5%88%86%E6%9E%90.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. Blob实践-应用场景和实例分析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Blob%E6%8C%87%E5%8D%97-%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0Blob%E5%AF%B9%E8%B1%A1%E7%9A%84%E4%BD%BF%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. Blob指南-从零开始学习Blob对象的使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Canvas%E5%85%A5%E9%97%A8-%E4%BA%86%E8%A7%A3%E5%87%A0%E4%B8%AA%E7%BB%98%E5%88%B6%E5%9F%BA%E6%9C%AC%E5%9B%BE%E5%BD%A2%E7%9A%84%20API.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. Canvas入门-了解几个绘制基本图形的 API</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Canvas%E8%BF%9B%E9%98%B6-%E5%88%9B%E4%BD%9C%E7%BE%8E%E8%BD%AE%E7%BE%8E%E5%A5%82%E7%9A%84%E4%B8%AD%E7%A7%8B%E6%9C%88%E9%A5%BC.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>5. Canvas进阶-创作美轮美奂的中秋月饼</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/ES6%E4%B8%AD%E7%A5%9E%E5%A5%87%E7%9A%84WeakMap.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>6. ES6中神奇的WeakMap</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/ES6%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8BPromise%EF%BC%8C%E5%BE%AA%E5%BA%8F%E6%B8%90%E8%BF%9B%E6%8E%8C%E6%8F%A1.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>7. ES6异步编程Promise，循序渐进掌握</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/ES6%E6%96%B0%E7%B1%BB%E5%9E%8BSymbol%E5%BF%85%E7%9F%A5%E5%BF%85%E4%BC%9A.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>8. ES6新类型Symbol必知必会</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/ES6%E7%94%9F%E6%88%90%E5%99%A8Generator-%E4%BC%98%E9%9B%85%E7%9A%84%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%88%A9%E5%99%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>9. ES6生成器Generator-优雅的异步编程利器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/ES6%E7%94%9F%E6%88%90%E5%99%A8Generator%E7%9A%84%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B%E5%BA%94%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>10. ES6生成器Generator的异步编程应用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Math%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0%E7%9A%84%E5%A6%99%E7%94%A8-%E5%B8%B8%E7%94%A8%E7%9A%84%E6%95%B0%E5%80%BC%E6%93%8D%E4%BD%9C.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>11. Math工具函数的妙用-常用的数值操作</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Set%E5%AE%9E%E8%B7%B5-%E6%8E%A2%E7%B4%A2Set%E5%AF%B9%E8%B1%A1%E8%BF%AD%E4%BB%A3%E3%80%81%E8%BD%AC%E6%8D%A2%E5%92%8C%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>12. Set实践-探索Set对象迭代、转换和应用场景</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/Set%E5%BF%85%E5%A4%87%E6%8C%87%E5%8D%97-%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Set%E7%9A%84%E7%89%B9%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>13. Set必备指南-深入理解Set的特性和方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/postMessage%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E8%B7%A8iframe%E9%A1%B5%E9%9D%A2%E9%80%9A%E4%BF%A1.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>14. postMessage如何实现跨iframe页面通信</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E4%B8%80%E8%A1%8C%E4%BB%A3%E7%A0%81-%E6%95%B0%E7%BB%84%E7%89%88.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>15. 一行代码-数组版</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E4%B8%87%E7%89%A9%E7%9A%86%E5%AF%B9%E8%B1%A1%EF%BC%8C%E8%AF%A6%E8%A7%A3%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%BC%96%E7%A8%8B%E7%9A%84%E6%A0%B8%E5%BF%83%E6%96%B9%E6%B3%95.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>16. 万物皆对象，详解面向对象编程的核心方法</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E6%9C%BA%E5%88%B6%EF%BC%8C%E4%B8%80%E6%96%87%E8%A7%A3%E6%9E%90%E5%AE%8F%E4%BB%BB%E5%8A%A1%E4%B8%8E%E5%BE%AE%E4%BB%BB%E5%8A%A1.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>17. 事件循环机制，一文解析宏任务与微任务</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%87%BD%E6%95%B0flatMap%E7%9A%84%E4%BD%BF%E7%94%A8%E5%8F%8A%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>18. 函数flatMap的使用及实现原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%87%BD%E6%95%B0reduce%E7%9A%84%E5%A6%99%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>19. 函数reduce的妙用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%87%BD%E6%95%B0%E5%8F%8D%E6%9F%AF%E9%87%8C%E5%8C%96.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>20. 函数反柯里化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%87%BD%E6%95%B0%E6%9F%AF%E9%87%8C%E5%8C%96%E7%9A%84%E5%AE%9E%E7%8E%B0%E4%B8%8E%E5%BA%94%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>21. 函数柯里化的实现与应用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-CDN%E7%BC%93%E5%AD%98.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>22. 前端性能优化-CDN缓存</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>23. 前端性能优化-回流与重绘</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>24. 前端性能优化-图片懒加载</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E9%98%B2%E6%8A%96%E4%B8%8E%E8%8A%82%E6%B5%81.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>25. 前端性能优化-防抖与节流</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%8F%AF%E9%80%89%E9%93%BE%E6%89%93%E9%80%A0%E7%AE%80%E6%B4%81%E4%B8%94%E5%81%A5%E5%A3%AE%E7%9A%84%E4%BB%A3%E7%A0%81.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>26. 可选链打造简洁且健壮的代码</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%B7%A7%E7%94%A8meta%E6%A0%87%E7%AD%BE%EF%BC%8C%E8%AE%BE%E7%BD%AEreferrer%E8%A7%A3%E5%86%B3403Forbidden.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>27. 巧用meta标签，设置referrer解决403Forbidden</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%EF%BC%8C%E4%BB%8E%E9%9B%B6%E5%88%B0%E4%B8%80%E5%BF%AB%E9%80%9F%E5%AE%9E%E7%8E%B0%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E6%8E%88%E6%9D%83.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>28. 微信公众号，从零到一快速实现微信公众号授权</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%EF%BC%8C%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8E%E5%85%AC%E4%BC%97%E5%8F%B7%E4%B8%8B%E5%8F%91%E7%BB%9F%E4%B8%80%E6%B6%88%E6%81%AF%E6%8E%A5%E5%8F%A3%E8%B0%83%E6%95%B4.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>29. 微信公众号，微信小程序与公众号下发统一消息接口调整</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%EF%BC%8C%E6%8E%A8%E9%80%81%E5%85%AC%E4%BC%97%E5%8F%B7%E6%A8%A1%E7%89%88%E6%B6%88%E6%81%AF%E6%95%B4%E6%94%B9%E6%96%B9%E6%A1%88.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>30. 微信小程序，推送公众号模版消息整改方案</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E6%8E%A2%E7%B4%A2%E4%BC%98%E9%9B%85%E7%9A%84%E5%A4%84%E7%90%86JavaScript%E7%B1%BB%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%8A%80%E5%B7%A7.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>31. 探索优雅的处理JavaScript类数组对象的技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E6%94%B9%E8%BF%9B%E6%9D%A1%E4%BB%B6%E8%AF%AD%E5%8F%A5%EF%BC%8C%E6%8E%A2%E7%B4%A2%E5%8F%AF%E4%BB%A5%E6%9B%BF%E4%BB%A3if...else%E7%9A%847%E7%A7%8D%E6%96%B9%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>32. 改进条件语句，探索可以替代if...else的7种方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E6%95%B0%E7%BB%84%E5%88%A4%E6%96%AD%E6%94%BB%E7%95%A5-%E5%91%8A%E5%88%AB%E8%AF%AF%E5%88%A4%EF%BC%8C%E7%B2%BE%E5%87%86%E5%88%A4%E5%AE%9A%E5%8F%98%E9%87%8F%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>33. 数组判断攻略-告别误判，精准判定变量是否为数组</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E6%96%87%E5%AD%97%E8%B7%91%E9%A9%AC%E7%81%AF%EF%BC%8C%E5%AE%9E%E7%8E%B0%E6%96%87%E5%AD%97%E8%87%AA%E5%8A%A8%E6%BB%9A%E5%8A%A8%E7%AD%96%E7%95%A5%E7%9A%84%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>34. 文字跑马灯，实现文字自动滚动策略的原理分析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E6%B7%B1%E5%85%A5%E5%AD%A6%E4%B9%A0%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E8%AE%BE%E8%AE%A1%E5%8E%9F%E5%88%99.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>35. 深入学习面向对象设计原则</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%8E%9F%E5%9E%8B%E4%B8%8E%E5%8E%9F%E5%9E%8B%E9%93%BE.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>36. 深入理解对象的原型与原型链</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E7%8E%A9%E8%BD%AC%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B5%85%E6%8B%B7%E8%B4%9D.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>37. 玩转深拷贝和浅拷贝</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E7%9B%98%E7%82%B9%E5%87%A0%E4%B8%AAinput%E6%A0%87%E7%AD%BE%E9%B2%9C%E4%B8%BA%E4%BA%BA%E7%9F%A5%E7%9A%84HTML%E5%B1%9E%E6%80%A7.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>38. 盘点几个input标签鲜为人知的HTML属性</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/front-end/%E9%97%AD%E5%8C%85%E4%B8%8E%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E8%A1%A8%E8%BE%BE%E5%BC%8FIIFE.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>39. 闭包与立即执行函数表达式IIFE</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>可视化大屏</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. 可视化大屏</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts-GL%E5%AE%9E%E7%8E%B03D%E5%9C%B0%E5%9B%BE%E4%B8%8B%E9%92%BB%E5%8A%9F%E8%83%BD.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. ECharts-GL实现3D地图下钻功能</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts-GL%E5%AE%9E%E7%8E%B03D%E6%97%8B%E8%BD%AC%E5%9C%B0%E7%90%83.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. ECharts-GL实现3D旋转地球</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts-GL%E5%AE%9E%E7%8E%B0%E4%B8%96%E7%95%8C%E7%BA%A7%E3%80%81%E5%9B%BD%E5%AE%B6%E7%BA%A7%E3%80%81%E7%9C%81%E5%B8%82%E7%BA%A73D%E5%9C%B0%E5%9B%BE.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. ECharts-GL实现世界级、国家级、省市级3D地图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts%E5%8D%81%E4%B8%87%E7%BA%A7+%E6%95%B0%E6%8D%AE%E6%B8%B2%E6%9F%93%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%A1%88.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>5. ECharts十万级+数据渲染性能优化方案</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts%E5%9B%BE%E8%A1%A8%E6%B8%B2%E6%9F%93%E5%AF%BC%E8%87%B4%E7%9A%84%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>6. ECharts图表渲染导致的内存泄漏问题分析</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts%E5%9C%B0%E5%9B%BE%E5%8C%BA%E5%9F%9F%E8%87%AA%E5%8A%A8%E9%AB%98%E4%BA%AE%E8%BD%AE%E6%92%AD%E7%9A%84%E6%96%B9%E6%A1%88.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>7. ECharts地图区域自动高亮轮播的方案</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts%E5%9C%B0%E5%9B%BE%E5%90%88%E8%A7%84%E6%95%B4%E6%94%B9%EF%BC%8C%E5%AE%9E%E7%8E%B0%E6%9C%80%E5%9F%BA%E7%A1%80%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%9C%B0%E5%9B%BE.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>8. ECharts地图合规整改，实现最基础的中国地图</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts%E5%9C%B0%E5%9B%BE%E5%AE%9E%E6%88%98%E5%88%86%E6%9E%90%EF%BC%8C%E5%AE%9E%E7%8E%B0%E5%AE%8C%E6%95%B4%E7%9A%84%E5%9C%B0%E5%9B%BE%E4%B8%8B%E9%92%BB%E5%8A%9F%E8%83%BD.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>9. ECharts地图实战分析，实现完整的地图下钻功能</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/large-screen/ECharts%E9%BC%A0%E6%A0%87%E8%87%AA%E7%94%B1%E5%88%B7%E9%80%89%E5%8C%BA%E5%9F%9F%EF%BC%8C%E5%AE%9A%E5%90%91%E6%94%BE%E5%A4%A7%E5%9B%BE%E8%A1%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>10. ECharts鼠标自由刷选区域，定向放大图表</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>开源项目</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/open-source/100%E8%A1%8C%E4%BB%A3%E7%A0%81%E6%89%93%E9%80%A0%E5%B0%8F%E8%80%8C%E7%BE%8E%E7%9A%84uni-app%E8%AF%B7%E6%B1%82%E5%BA%93.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. 100行代码打造小而美的uni-app请求库</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/open-source/FlyHttp%E4%BB%A3%E7%A0%81%E6%8F%90%E7%A4%BA%E6%8C%87%E5%8D%97.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. FlyHttp代码提示指南</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/open-source/%E5%85%A8%E7%AB%AF%E9%80%9A%E7%94%A8%E5%89%8D%E7%AB%AF%E5%B0%8F%E5%B7%A5%E5%85%B7%EF%BC%81%E5%8A%A0%E9%80%9F%E6%9E%84%E5%BB%BAAPI%E8%AF%B7%E6%B1%82%E7%B1%BB.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. 全端通用前端小工具！加速构建API请求类</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>开发工具</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. 开发工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/Coze%E6%89%A3%E5%AD%90%E5%88%9D%E4%BD%93%E9%AA%8C%EF%BC%8C%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%99%BA%E8%83%BD%E6%95%85%E4%BA%8B%E6%9C%BABot.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. Coze扣子初体验，创建一个智能故事机Bot</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/GitFlow%EF%BC%9A%E4%BC%98%E5%8C%96%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%EF%BC%8C%E5%9B%A2%E9%98%9F%E5%8D%8F%E4%BD%9C%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. GitFlow：优化开发流程，团队协作的最佳实践</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/Gulp%E6%89%93%E5%8C%85%EF%BC%9A%E8%A7%A3%E5%86%B3%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2%E7%BC%93%E5%AD%98%E9%97%AE%E9%A2%98.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. Gulp打包：解决前端项目部署缓存问题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/NVM%E8%AE%BE%E7%BD%AE%E5%A4%9A%E9%A1%B9%E7%9B%AE%E4%B8%8D%E5%90%8CNode.js%E7%8E%AF%E5%A2%83.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>5. NVM设置多项目不同Node.js环境</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/PNPM%E5%8C%85%E7%AE%A1%E7%90%86%E6%8E%A2%E7%B4%A2.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>6. PNPM包管理探索</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/Rollup%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97%EF%BC%9A%E8%A7%A3%E5%AF%86%E9%AB%98%E6%95%88%E7%9A%84JavaScript%E6%89%93%E5%8C%85%E5%99%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>7. Rollup入门指南：解密高效的JavaScript打包器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/Rollup%E9%AB%98%E7%BA%A7%E7%89%B9%E6%80%A7%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%8B%86%E5%88%86%E3%80%81Tree-shaking%E5%92%8C%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>8. Rollup高级特性：代码拆分、Tree-shaking和插件系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/VOLTA%EF%BC%9A%E6%9B%B4%E4%BC%98%E7%A7%80%E7%9A%84%E9%A1%B9%E7%9B%AE%E7%BA%A7Node.js%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>9. VOLTA：更优秀的项目级Node.js版本管理工具</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/VSCode%E6%8F%92%E4%BB%B6%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97%EF%BC%8C%E6%8F%90%E5%8D%87%E8%87%AA%E5%B7%B1%E7%9A%84%E7%BC%96%E7%A0%81%E6%95%88%E7%8E%87.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>10. VSCode插件开发指南，提升自己的编码效率</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/gitignore%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84%E9%80%9A%E9%85%8D%E7%AC%A6%E4%BD%BF%E7%94%A8%E5%92%8C%E5%BF%BD%E7%95%A5%E8%A7%84%E5%88%99.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>11. gitignore文件中的通配符使用和忽略规则</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/i18NEXT%E5%9B%BD%E9%99%85%E5%8C%96%EF%BC%9A%E9%99%88%E5%B9%B4%E8%80%81%E6%97%A7%E9%A1%B9%E7%9B%AE%E5%A6%82%E4%BD%95%E8%BF%9B%E8%A1%8C%E5%9B%BD%E9%99%85%E5%8C%96.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>12. i18NEXT国际化：陈年老旧项目如何进行国际化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/tools/iOSAPP%E5%A4%87%E6%A1%88%EF%BC%9A%E5%A6%82%E4%BD%95%E9%80%9A%E8%BF%87%E8%AF%81%E4%B9%A6%E6%96%87%E4%BB%B6%E8%8E%B7%E5%8F%96%E5%85%AC%E9%92%A5%E5%92%8C%E6%8C%87%E7%BA%B9.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>13. iOSAPP备案：如何通过证书文件获取公钥和指纹</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>uni-app开发</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. uni-app开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E5%9B%BE%E6%A0%87%E5%BA%93%E6%95%B4%E5%90%88-%E4%BD%BF%E7%94%A8iconfont%E6%9E%84%E5%BB%BA%E5%9B%BE%E6%A0%87%E5%BA%93.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. uni-app图标库整合-使用iconfont构建图标库</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E5%A4%9A%E7%AB%AF%E7%BC%96%E8%AF%91-static%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. uni-app多端编译-static目录条件编译最佳实践</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E5%A4%9A%E7%AB%AF%E9%83%A8%E7%BD%B2-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B9%B3%E5%8F%B0%E7%9A%84%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91%E5%AE%9E%E6%88%98%E8%AF%A6%E8%A7%A3.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. uni-app多端部署-自定义平台的条件编译实战详解</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%86%E5%8C%85%E7%AD%96%E7%95%A5-%E5%90%88%E7%90%86%E4%BC%98%E5%8C%96%E5%8C%85%E4%BD%93%E7%A7%AF%E5%88%86%E5%B8%83.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>5. uni-app小程序分包策略-合理优化包体积分布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8Drpx.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>6. uni-app尺寸单位rpx</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E6%89%AB%E7%A0%81%E4%BC%98%E5%8C%96-%E5%A6%82%E4%BD%95%E6%8F%90%E5%8D%87%E5%AE%89%E5%8D%93App%E6%89%AB%E7%A0%81%E5%87%86%E7%A1%AE%E7%8E%87.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>7. uni-app扫码优化-如何提升安卓App扫码准确率</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E6%89%AB%E7%A0%81%E6%8F%92%E4%BB%B6%E6%8E%A8%E8%8D%90-%E5%9F%BA%E4%BA%8E%E6%94%AF%E4%BB%98%E5%AE%9DmPaaS%E6%89%AB%E7%A0%81%E7%BB%84%E4%BB%B6.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>8. uni-app扫码插件推荐-基于支付宝mPaaS扫码组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/uni-app%E8%AF%B7%E6%B1%82%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5-%E5%9F%BA%E4%BA%8E%E8%87%AA%E5%AE%9A%E4%B9%89Request%E8%AF%B7%E6%B1%82%E5%BA%93.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>9. uni-app请求最佳实践-基于自定义Request请求库</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/%E6%89%93%E5%8C%85uni-app%E5%BA%94%E7%94%A8-%E5%AE%89%E5%8D%93%E7%AF%87%E6%89%93%E5%8C%85%E6%8C%87%E5%8D%97.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>10. 打包uni-app应用-安卓篇打包指南</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/uni-app/%E7%BB%8F%E5%8E%86%E4%BA%86PMP%E5%92%8C%E8%BD%AF%E8%80%83%E9%AB%98%E9%A1%B9%EF%BC%8C%E6%88%91%E7%8B%AC%E7%AB%8B%E5%BC%80%E5%8F%91%E4%BA%86%E4%B8%80%E6%AC%BE%E5%88%B7%E9%A2%98%E5%B0%8F%E7%A8%8B%E5%BA%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>11. 经历了PMP和软考高项，我独立开发了一款刷题小程序</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-575e6a36><section class="VPSidebarItem level-0 collapsible collapsed" data-v-575e6a36 data-v-b8d55f3b><div class="item" role="button" tabindex="0" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><h2 class="text" data-v-b8d55f3b>Vue.js开发</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-b8d55f3b><span class="vpi-chevron-right caret-icon" data-v-b8d55f3b></span></div></div><div class="items" data-v-b8d55f3b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>1. Vue.js开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vuex%E5%85%A5%E9%97%A8%E4%B8%8E%E5%AE%9E%E6%88%98.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>2. Vuex入门与实战</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vuex%E8%BF%9B%E9%98%B6%E7%9F%A5%E8%AF%86.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>3. Vuex进阶知识</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E4%BA%8B%E4%BB%B6%E6%80%BB%E7%BA%BF%E7%9A%84%E5%8E%9F%E7%90%86%E4%B8%8E%E5%BA%94%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>4. Vue事件总线的原理与应用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5%E6%9C%BA%E5%88%B6.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>5. Vue依赖注入机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E4%BE%A6%E5%90%AC%E5%99%A8watch%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>6. Vue侦听器watch的使用方法及注意事项</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F%E5%88%86%E6%9E%90%EF%BC%9A%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E5%BC%80%E5%8F%91%E8%BF%87%E7%A8%8B%E4%B8%AD%E5%AF%BC%E8%87%B4%E7%9A%84%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F%E9%97%AE%E9%A2%98.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>7. Vue内存泄漏分析：如何避免开发过程中导致的内存泄漏问题</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E5%89%8D%E7%AB%AF%E6%9D%83%E9%99%90%E6%8E%A7%E5%88%B6%EF%BC%9A%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%20Vue%20%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E7%9A%84%E5%BA%94%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>8. Vue前端权限控制：深入理解 Vue 自定义指令的应用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9B%91%E5%90%ACwatch%E7%9A%84%E5%A6%99%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>9. Vue响应式监听watch的妙用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E5%9F%BA%E7%A1%80%E6%8C%87%E4%BB%A4%E7%9A%84%E9%AD%85%E5%8A%9B.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>10. Vue基础指令的魅力</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0nextTick%E8%A7%A3%E6%9E%90%E4%B8%8E%E5%AE%9E%E8%B7%B5.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>11. Vue异步更新nextTick解析与实践</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E6%8F%92%E6%A7%BD%EF%BC%9A%E6%8F%90%E5%8D%87Vue%E7%BB%84%E4%BB%B6%E7%81%B5%E6%B4%BB%E6%80%A7%E7%9A%84%E5%88%A9%E5%99%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>12. Vue插槽：提升Vue组件灵活性的利器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E7%BC%93%E5%AD%98%E7%BB%84%E4%BB%B6%EF%BC%9AKeepAlive.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>13. Vue缓存组件：KeepAlive</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%E5%AE%9E%E6%88%98%EF%BC%9A%E6%8E%8C%E6%8F%A1%E9%AB%98%E7%BA%A7%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%8A%80%E5%B7%A7.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>14. Vue自定义指令实战：掌握高级前端开发技巧</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0v-model%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>15. Vue自定义组件实现v-model的几种方式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%EF%BC%9Acomputed%E7%9A%84%E4%BD%BF%E7%94%A8%E4%B8%8E%E4%BC%98%E5%8C%96.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>16. Vue计算属性：computed的使用与优化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b8d55f3b data-v-b8d55f3b><div class="item" data-v-b8d55f3b><div class="indicator" data-v-b8d55f3b></div><a class="VPLink link link" href="/site/zh/blog/vuejs2/Vue%E9%AB%98%E7%BA%A7%E6%8C%87%E4%BB%A4%E8%A7%A3%E6%9E%90%EF%BC%9A%E6%8E%8C%E6%8F%A1%E5%87%A0%E4%B8%AA%E5%86%85%E7%BD%AE%E6%8C%87%E4%BB%A4%E7%9A%84%E5%90%84%E7%A7%8D%E5%A6%99%E7%94%A8.html" data-v-b8d55f3b><!--[--><p class="text" data-v-b8d55f3b>17. Vue高级指令解析：掌握几个内置指令的各种妙用</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>页面导航</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _site_zh_blog_css_SCSS%E8%BF%9B%E9%98%B6-%E6%8E%A2%E7%B4%A2%E6%9B%B4%E5%A4%9A%E6%A0%B7%E5%BC%8F%E8%A1%A8%E8%BE%BE%E7%9A%84%E5%8F%AF%E8%83%BD%E6%80%A7" data-v-39a288b8><div><h1 id="scss-进阶之道-探索更多样式表达的可能性" tabindex="-1">SCSS 进阶之道：探索更多样式表达的可能性 <a class="header-anchor" href="#scss-进阶之道-探索更多样式表达的可能性" aria-label="Permalink to &quot;SCSS 进阶之道：探索更多样式表达的可能性&quot;">​</a></h1><h2 id="前言" tabindex="-1">前言 <a class="header-anchor" href="#前言" aria-label="Permalink to &quot;前言&quot;">​</a></h2><p>上一篇文章，我们揭开了 SCSS 神秘面纱，了解到 SCSS 是 CSS 的一种超集，也是一种预处理器，也了解到它是基于 Sass 语法，并且完全兼容 CSS 语法。同时我们学习到了 SCSS 如何使用，从安装到基本语法的说明，相信大家都有了深刻的认识。</p><p>想要详细了解一下 SCSS 的基础应用，请参考上一篇文章：</p><p><a href="https://juejin.cn/post/7296692047418507274" target="_blank" rel="noreferrer">揭开 SCSS 神秘面纱：利用预处理器升级你的样式表技术</a></p><p>本篇文章将为大家深入探讨 SCSS 的进阶使用技巧，帮助开发者们更好地利用 SCSS 来优化他们的样式代码。我们将通过如何组织和管理大型项目的样式文件结构、使用继承来减少冗余代码、利用嵌套更方便地编写样式规则、掌握条件语句和循环等实用技巧。</p><p>通过学习这些高级功能，相信我们大家将能够提高代码的编写效率、减少重复的样式代码、保持代码的可维护性，并更好地应对项目的需求变化。</p><h2 id="一-混合器-mixins" tabindex="-1">一. 混合器（Mixins） <a class="header-anchor" href="#一-混合器-mixins" aria-label="Permalink to &quot;一. 混合器（Mixins）&quot;">​</a></h2><p>混合器（Mixins）是一种重复使用的代码片段，类似于函数，用于在样式表中声明、定义和应用一组样式规则。它可以简化样式表的编写并增加可维护性。</p><p>混合器允许将一组样式属性集合封装在一个可复用的块中，并在需要时调用这个块。通过使用<code>@mixin</code>关键字进行声明，并通过<code>@include</code>关键字调用。</p><p>SCSS 混合器有以下几个主要的概念和使用方法：</p><h3 id="_1-定义混合器" tabindex="-1">1. 定义混合器 <a class="header-anchor" href="#_1-定义混合器" aria-label="Permalink to &quot;1. 定义混合器&quot;">​</a></h3><p>通过<code>@mixin</code>关键词定义混合器，后跟一个名称和一组样式规则。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_2-使用混合器" tabindex="-1">2. 使用混合器 <a class="header-anchor" href="#_2-使用混合器" aria-label="Permalink to &quot;2. 使用混合器&quot;">​</a></h3><p>在需要使用这组样式规则的地方，使用<code>@include</code>关键词引用混合器，后跟混合器的名称。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_3-参数传递" tabindex="-1">3. 参数传递 <a class="header-anchor" href="#_3-参数传递" aria-label="Permalink to &quot;3. 参数传递&quot;">​</a></h3><p>混合器可以接受参数，进一步增加了灵活性。在混合器定义中，使用<code>$</code>符号声明参数，并在混合器使用时通过传递参数的方式修改样式。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$text-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$text-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_4-默认参数" tabindex="-1">4. 默认参数 <a class="header-anchor" href="#_4-默认参数" aria-label="Permalink to &quot;4. 默认参数&quot;">​</a></h3><p>混合器参数还可以设置默认值，在定义混合器时使用<code>$变量名: 默认值</code>的方式。如果在使用混合器时没有传递对应的参数，则使用默认值。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$text-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$bg-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$text-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @include</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_5-嵌套混合器" tabindex="-1">5. 嵌套混合器 <a class="header-anchor" href="#_5-嵌套混合器" aria-label="Permalink to &quot;5. 嵌套混合器&quot;">​</a></h3><p>在混合器中可以嵌套其他混合器，以实现更复杂的样式组合。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@mixin</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:hover</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#00f</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>通过使用混合器，我们可以在样式表中定义一组常用的样式规则，并在需要时重复使用。这样可以提高代码的可维护性和可读性，并减少样式表的冗余代码。同时，混合器还提供了参数和嵌套的能力，使得样式的定制和组合更加灵活和方便。在 SCSS 中，混合器是一个强大的工具，值得学习和掌握。</p><h2 id="二-继承-inheritance" tabindex="-1">二. 继承（Inheritance） <a class="header-anchor" href="#二-继承-inheritance" aria-label="Permalink to &quot;二. 继承（Inheritance）&quot;">​</a></h2><p>在 SCSS 中，可以使用继承（<code>@extend</code>）来实现样式的复用。继承是一种让一个选择器（子选择器）继承另一个选择器（父选择器）的样式规则的方式。这样可以使得子选择器具有父选择器的样式，避免了重复编写相同的样式规则。</p><p>简单来说，继承是一种通过继承一个选择器的样式来复用样式的机制。通过使用@extend 关键字实现选择器的继承。</p><p>以下是使用继承实现样式复用的基本步骤：</p><h3 id="_1-定义父选择器" tabindex="-1">1. 定义父选择器 <a class="header-anchor" href="#_1-定义父选择器" aria-label="Permalink to &quot;1. 定义父选择器&quot;">​</a></h3><p>首先，需要定义一个父选择器，其中包含需要被复用的样式规则。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.btn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#fff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="_2-使用继承" tabindex="-1">2. 使用继承 <a class="header-anchor" href="#_2-使用继承" aria-label="Permalink to &quot;2. 使用继承&quot;">​</a></h3><p>在子选择器中使用<code>@extend</code>关键词，后跟要继承的父选择器。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.my-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @extend</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> .btn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>通过这样的方式，<code>.my-button</code>选择器将继承<code>.btn</code>选择器的样式规则，即具有相同的<code>background</code>、<code>color</code>和<code>padding</code>。</p><p>需要注意以下几点：</p><ul><li>继承只能在选择器级别上进行，无法继承样式属性、类或关键字。</li><li>继承是基于选择器选择的元素的继承，而不是类似于 JavaScript 的原型继承。</li><li>继承的样式规则将会被合并到子选择器中，父选择器中未被继承的样式规则不会被复制到子选择器中。</li></ul><p>除了基本的继承，SCSS 还提供了一些高级的继承用法，如占位符选择器（<code>%placeholder</code>）和多重继承等。占位符选择器可以用来定义可复用的样式规则，而不会生成对应的 CSS 类。多重继承则允许一个选择器继承多个父选择器的样式。</p><p>继承是 SCSS 中强大的功能，能够使样式的复用变得更加简单和易于维护。合理地使用继承，可以减少代码量，提高开发效率，并保持样式的一致性。</p><h2 id="三-运算" tabindex="-1">三. 运算 <a class="header-anchor" href="#三-运算" aria-label="Permalink to &quot;三. 运算&quot;">​</a></h2><p>SCSS 提供了数学运算和逻辑运算，方便在样式表中进行数字计算和条件判断。下面分别介绍 SCSS 中的数学运算和逻辑运算。</p><h3 id="_1-数学运算" tabindex="-1">1. 数学运算 <a class="header-anchor" href="#_1-数学运算" aria-label="Permalink to &quot;1. 数学运算&quot;">​</a></h3><ul><li><p>加法（<code>+</code>）、减法（<code>-</code>）、乘法（<code>*</code>）和除法（<code>/</code>）：可以在数值之间使用这些运算符进行基本的算术运算。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">200</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> *</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  margin-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$padding</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> /</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li><li><p>取余（<code>%</code>）：可以使用取模运算符获取两个数值相除的余数。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.item</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  margin-left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">5</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">  &amp;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:nth-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">3n</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> + </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul><h3 id="_2-逻辑运算" tabindex="-1">2. 逻辑运算 <a class="header-anchor" href="#_2-逻辑运算" aria-label="Permalink to &quot;2. 逻辑运算&quot;">​</a></h3><ul><li><p>与（<code>and</code>）和或（<code>or</code>）：用于进行逻辑与和逻辑或操作。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$has-border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: true;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$is-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: false;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.btn</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 使用逻辑与运算符</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $has-border</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> and</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $is-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    border</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> solid</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> #000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 使用逻辑或运算符</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $has-border</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> or</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $is-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#f00</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li><li><p>非（<code>not</code>）：用于取反操作。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$is-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: false;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 使用逻辑非运算符</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @if</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> not</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $is-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    display</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul><p>通过 SCSS 中的数学运算和逻辑运算，我们可以在样式表中进行各种数字计算和条件判断，使得样式更具灵活性和动态性。这些运算符的使用方式类似于常见的编程语言，可以根据需要进行组合和嵌套使用，实现复杂的计算和条件。</p><h2 id="四-函数-functions" tabindex="-1">四. 函数（Functions） <a class="header-anchor" href="#四-函数-functions" aria-label="Permalink to &quot;四. 函数（Functions）&quot;">​</a></h2><p>SCSS 提供了许多内置函数，用于处理文本、颜色、数值等方面的操作。除了内置函数，我们还可以定义自己的 SCSS 函数来处理特定的需求。下面介绍一些常用的 SCSS 内置函数和自定义函数的使用方法。</p><p>函数允许我们定义和使用可以接受参数并返回值的样式片段。通过使用 <code>@function</code> 关键字进行声明，并在需要时调用函数。</p><h3 id="_1-scss-内置函数" tabindex="-1">1. SCSS 内置函数 <a class="header-anchor" href="#_1-scss-内置函数" aria-label="Permalink to &quot;1. SCSS 内置函数&quot;">​</a></h3><ul><li><p>字符串函数：<code>str-length()</code>用于获取字符串的长度，<code>str-insert()</code>用于在字符串中插入内容，<code>str-index()</code>用于查找字符串中某个子串的位置等。</p></li><li><p>数值函数：<code>percentage()</code>用于将数值转换为百分比，<code>round()</code>用于四舍五入到指定小数位，<code>abs()</code>用于取绝对值等。</p></li><li><p>颜色函数：<code>lighten()</code>用于将颜色变亮，<code>darken()</code>用于将颜色变暗，<code>mix()</code>用于混合两种颜色，<code>rgba()</code>用于添加透明度等。</p></li><li><p>列表函数：<code>length()</code>用于获取列表长度，<code>nth()</code>用于获取列表中指定位置的值，<code>join()</code>用于将多个列表合并为一个等。</p></li></ul><h3 id="_2-自定义函数" tabindex="-1">2. 自定义函数 <a class="header-anchor" href="#_2-自定义函数" aria-label="Permalink to &quot;2. 自定义函数&quot;">​</a></h3><ul><li><p>声明函数：使用<code>@function</code>关键字来声明一个 SCSS 函数，并定义函数名和参数。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@function</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  @return</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $a</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $b</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li><li><p>使用自定义函数：在样式表中使用定义的函数，并传入参数。例如：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 使用自定义函数</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul><p>自定义函数可以根据具体需求编写，用于处理复杂的计算、转换或逻辑等操作。在函数体内使用<code>@return</code>关键字来返回计算结果。</p><p>补充说明：SCSS 是 Sass 的一种语法扩展，Sass 是一种 CSS 预处理器，可以在 CSS 的基础上引入变量、嵌套规则、混合（mixin）、继承、函数等特性。因此，SCSS 内置函数的使用与 Sass 的内置函数是类似的。</p><p>无论是 SCSS 内置函数还是自定义函数，它们提供了更大的灵活性和可重用性，使得样式表的编写更加高效和易于维护。</p><h2 id="五-条件语句-if、else" tabindex="-1">五. 条件语句（if、else） <a class="header-anchor" href="#五-条件语句-if、else" aria-label="Permalink to &quot;五. 条件语句（if、else）&quot;">​</a></h2><p>在 SCSS 中，我们可以使用 if 和 else 语句来实现条件逻辑。if 语句用于根据条件判断执行不同的代码块，而 else 语句可选地与 if 语句一起使用，用于在条件不满足时执行备选的代码块。</p><p>下面是使用 if 和 else 语句实现条件逻辑的示例：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义一个变量</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 使用if语句</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else if</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> ==</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@else </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .box</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>在上面的示例中，我们首先定义了一个变量<code>$color</code>，然后根据不同的条件值使用 if 语句进行判断。如果<code>$color</code>等于红色（red），则给<code>.box</code>元素设置红色背景色；如果<code>$color</code>等于蓝色（blue），则除了背景色为蓝色，还给<code>.box</code>元素设置了白色文字颜色；如果条件都不满足，则使用 else 语句给<code>.box</code>元素设置绿色背景色。</p><p>需要注意的是，在 SCSS 中，条件判断使用的是双等号（==），而不是 CSS 中单等号（=）。</p><p>通过 if 和 else 语句，我们可以根据不同的条件执行相应的代码块，使得样式表可以根据不同的情况动态调整，具有更大的灵活性。</p><h2 id="六-循环-for、each、while" tabindex="-1">六. 循环（for、each、while） <a class="header-anchor" href="#六-循环-for、each、while" aria-label="Permalink to &quot;六. 循环（for、each、while）&quot;">​</a></h2><p>在 SCSS 中，我们可以使用循环语句来重复执行一段代码块。SCSS 提供了多种循环方式，包括 for 循环、each 循环和 while 循环。下面逐个介绍它们的用法和示例：</p><h3 id="_1-for-循环" tabindex="-1">1. for 循环 <a class="header-anchor" href="#_1-for-循环" aria-label="Permalink to &quot;1. for 循环&quot;">​</a></h3><p>for 循环通常用于按照一定规律重复执行代码块，使用<code>@for</code>关键字进行声明。语法格式为：<code>@for $变量 from 起始值 through 结束值</code>，其中<code>through</code>表示包含结束值，如果使用<code>to</code>则表示不包含结束值。</p><p>示例：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@for</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> from</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> through</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .item-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$i}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> *</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>上述代码中，通过 for 循环生成了 5 个.item 样式，分别为.item-1 到.item-5，每个元素的宽度逐渐增加 20px。</p><h3 id="_2-each-循环" tabindex="-1">2. each 循环 <a class="header-anchor" href="#_2-each-循环" aria-label="Permalink to &quot;2. each 循环&quot;">​</a></h3><p>each 循环用于迭代列表或映射中的元素，并对每个元素执行一段代码块。使用<code>@each</code>关键字进行声明。语法格式为：<code>@each $变量 in 集合</code>。</p><p>示例：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">red</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">green</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">blue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@each</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $color</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> in</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $colors</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .bg-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$color}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>上述代码中，通过 each 循环对$colors 列表中的每个颜色进行遍历，生成了对应的样式类，即.bg-red, .bg-green, .bg-blue。</p><h3 id="_3-while-循环" tabindex="-1">3. while 循环 <a class="header-anchor" href="#_3-while-循环" aria-label="Permalink to &quot;3. while 循环&quot;">​</a></h3><p>while 循环用于根据条件重复执行代码块，只要条件为真，就会一直执行。使用<code>@while</code>关键字进行声明。语法格式为：<code>@while 条件</code>。</p><p>示例：</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@while</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">  .item-</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">#{$i}</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> *</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> $i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  $i</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$i</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> +</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>上述代码中，通过 while 循环实现了类似 for 循环的效果，生成了与第一个示例相同的.item 样式。</p><p>通过循环语句，我们可以更灵活地生成样式，减少冗余的代码，并且可以根据变量的变化自动生成样式类。这样可以大大提高样式表的可维护性和扩展性。</p><h2 id="七-最佳实践-模块化开发" tabindex="-1">七. 最佳实践 - 模块化开发 <a class="header-anchor" href="#七-最佳实践-模块化开发" aria-label="Permalink to &quot;七. 最佳实践 - 模块化开发&quot;">​</a></h2><p>在 SCSS 中，良好的文件结构组织可以提高代码的可维护性和扩展性。下面总结开发 SCSS 时定义结构组织的最佳项目实践，也是一种常见的 SCSS 文件结构组织方式：</p><h3 id="_1-主文件-main-file" tabindex="-1">1. 主文件（Main File） <a class="header-anchor" href="#_1-主文件-main-file" aria-label="Permalink to &quot;1. 主文件（Main File）&quot;">​</a></h3><p>主文件是整个 SCSS 项目的入口文件，命名为<code>main.scss</code>或者类似的名称。主文件主要用于导入其他模块和组件的样式，并定义全局的样式规则。主文件通常不包含具体的样式代码，而是充当一个组织和导入各个模块的角色。</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 导入样式文件</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;reset&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;variables&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;typography&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 定义全局样式</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  font-family</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">sans-serif</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 导入组件样式</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;button&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@import</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;navbar&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span></code></pre></div><h3 id="_2-模块-modules" tabindex="-1">2. 模块（Modules） <a class="header-anchor" href="#_2-模块-modules" aria-label="Permalink to &quot;2. 模块（Modules）&quot;">​</a></h3><p>模块通常包含一个特定的功能或组件的样式代码，命名为<code>_module.scss</code>。模块文件中的样式应该只针对该模块本身，不应该包含与其他模块相关的样式。模块文件不会被编译成独立的 CSS 文件，而是由主文件通过<code>@import</code>导入使用。</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _reset.scss</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ul</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">ol</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _variables.scss</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$primary-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#007bff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _typography.scss</span></span>
<span class="line"><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  font-weight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">bold</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _button.scss</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$primary-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span></code></pre></div><h3 id="_3-组件-components" tabindex="-1">3. 组件（Components） <a class="header-anchor" href="#_3-组件-components" aria-label="Permalink to &quot;3. 组件（Components）&quot;">​</a></h3><p>组件是更为复杂的模块，通常由一组相关的样式代码构成。组件的文件名可以使用<code>_component.scss</code>或类似的命名规则。组件可以分为独立的子组件，每个子组件可以有自己的样式和子文件夹。</p><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _navbar.scss</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.navbar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">$primary-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _navbar-logo.scss</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.navbar-logo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// _navbar-menu.scss</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.navbar-menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// ...</span></span></code></pre></div><p>通过以上的文件结构组织，我们可以实现模块化的样式代码，将样式按照功能进行划分和管理，提高代码的复用性和可维护性。同时，合理的文件结构可以更好地组织代码，促进团队协作和开发效率。</p><h2 id="总结" tabindex="-1">总结 <a class="header-anchor" href="#总结" aria-label="Permalink to &quot;总结&quot;">​</a></h2><p>本文已经详细介绍了 SCSS 的进阶使用技巧，帮助我们更好地应对日益复杂的前端项目需求，提高开发效率和代码可维护性。</p><p>通过组织和管理大型项目的样式文件结构，我们可以清晰地分离和组织样式规则，方便多人协作和模块化开发。使用继承和占位选择器能够减少冗余的样式代码，提高代码的复用性和可维护性。嵌套的灵活运用使得样式规则的书写更加简洁和直观。掌握条件语句和循环等高级功能，可以更好地应对复杂的样式计算和动态调整。</p><p>SCSS 作为一种强大的 CSS 预处理器，能够通过其丰富的功能和语法提供更好的开发体验。通过深入了解 SCSS 的特性和技巧，我们可以更好地优化我们的前端开发工作流程，简化样式代码，大幅提高开发效率。</p><p>最后，希望本篇文章对大家在使用 SCSS 时有所帮助，能够为他们的前端开发工作带来便利和效益。</p><div class="article-footer-info" data-v-525627f3><h2 data-v-525627f3>关于我</h2><div data-v-525627f3><p data-v-525627f3>👨‍🎓 教育 | 计算机科学与技术 · 本科</p><p data-v-525627f3>👨‍💻 工作 | 前端开发工程师</p><p data-v-525627f3>🏷️ 技术 | Vue、Angular、React、JS、TS、node、uni-app、小程序等</p><p data-v-525627f3> 📱 微信 | anyupxing <!--[--><span class="cursor follow-us el-tooltip__trigger el-tooltip__trigger" data-v-525627f3>加我为好友，共同交流进步！</span><!--teleport start--><!--teleport end--><!--]--></p><p class="cursor" data-v-525627f3> 🏆 公众号｜ 前端梦工厂 <!--[--><span class="cursor follow-us el-tooltip__trigger el-tooltip__trigger" data-v-525627f3>关注公众号，让我们一起逐梦前端！</span><!--teleport start--><!--teleport end--><!--]--></p></div><h4 data-v-525627f3>本文其他阅读地址</h4><div class="article-link-info" data-v-525627f3><!--[--><div class="article-link-info-item" data-v-525627f3><text class="custom-icon custom-icon-juejin" style="font-size:20px;color:#1e80ff;" data-v-525627f3></text><a href="https://juejin.cn/post/7297033227894341671" target="_blank" rel="noopener noreferrer" data-v-525627f3>稀土掘金</a></div><!--]--></div></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><div class="edit-info" data-v-09de1c0f><!----><div class="last-updated" data-v-09de1c0f><p class="VPLastUpdated" data-v-09de1c0f data-v-7e05ebdb>最后更新于: <time datetime="2024-09-23T09:27:09.000Z" data-v-7e05ebdb></time></p></div></div><nav class="prev-next" data-v-09de1c0f><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link prev" href="/site/zh/blog/css/SCSS%E5%AE%9E%E8%B7%B5-%E6%9E%84%E5%BB%BA%E9%80%82%E5%90%88%E8%87%AA%E5%B7%B1%E7%9A%84%E5%85%A8%E5%B1%80%E6%A0%B7%E5%BC%8F%E5%BA%93.html" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>上一页</span><span class="title" data-v-09de1c0f>3. SCSS实践-构建适合自己的全局样式库</span><!--]--></a></div><div class="pager" data-v-09de1c0f><a class="VPLink link pager-link next" href="/site/zh/blog/design-pattern/" data-v-09de1c0f><!--[--><span class="desc" data-v-09de1c0f>下一页</span><span class="title" data-v-09de1c0f>1. 设计模式</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>备案许可：<a style="color:#4e6e8e;" rel="noopener noreferrer" target="_blank" href="https://beian.miit.gov.cn/">鲁ICP备2021040594号-1</a></p><p class="copyright" data-v-e315a0ad>Copyright © 2020 - 2024 <a target="_blank" href="https://github.com/anyup"> Colorful Design </a></p></div></footer><!--[--><!--]--></div></div>
    
    
  </body>
</html>